<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" th:href="@{../bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{../css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{../css/main.css}">
    <style>
        .tree li {
            list-style-type: none;
            cursor:pointer;
        }
        table tbody tr:nth-child(odd){background:#F4F4F4;}
        table tbody td:nth-child(even){color:#C00;}
        select,option{
            font-size: 20px;
        }
        .myModal-input{
            width: 200px;
            line-height: 30px;
            display: inline;
        }
        .modal-dialog{
            width:900px;
        }
        label{
            display: inline-block;
            min-width: 70px;/*或者 width: 100px;*/
        }
    </style>
</head>

<body>


<div th:replace="../templates/nav"></div>
<div class="container-fluid">
    <div class="row">
        <div th:replace="../templates/menu"></div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
                </div>
                <div class="panel-body">
                    <form class="form-inline" role="form" style="float:left;" >

                            班级：<select  id="option" class="form-control"> </select>

                            <div class="input-group">
                                <div class="input-group-addon">姓名</div>
                                <input class="form-control has-success" type="text" placeholder="请输入查询条件" id="stname">
                            </div>

                            <div class="input-group">
                                <div class="input-group-addon">学号</div>
                                <input class="form-control has-success" type="text" placeholder="请输入查询条件" id="sid">
                            </div>

                        <button type="button" class="btn btn-warning" id="btnSearch"><i class="glyphicon glyphicon-search"></i> 搜索</button>
                    </form>
                    <button type="button" class="btn btn-primary" style="float:right;margin-left:10px;" id="btnDelSelected" onclick="selecttu()"><i class=" glyphicon "></i> 更多...</button>
                    <button type="button" style="float:right;height: 33px" class="btn btn-danger btn-xs" onclick="deletemany()"><i class=" glyphicon "></i>删除</button>
<!--                    <button type="button" class="btn btn-danger" style="float:right;" data-toggle="modal" data-target="#myModal1" onclick="deletemany()"><i class="glyphicon "></i> 删除</button>-->
<!--                    <button type="button" class="btn btn-primary" style="float:right;" data-toggle="modal" data-target="#myModal1" onclick="save()"><i class="glyphicon glyphicon-plus"></i> 新增</button>-->
                    <button class="btn btn-primary btn-xs" data-toggle="modal" style="float:right;height: 33px;margin-right: 9px" data-target="#myModal" onclick="edit()"><i class=" glyphicon glyphicon-plus">增加</i></button>
                    <br>
                    <hr style="clear:both;">
                    <div class="table-responsive">
                        <form id="delForm">
                            <table class="table  table-bordered">
                                <thead>
                                <tr>
                                    <th style='text-align: center'>#</th>
                                    <th style='text-align: center'>姓名</th>
                                    <th style='text-align: center'>工资</th>
                                    <th style='text-align: center'>工作地点</th>
                                    <th width="180" style='text-align: center'>操作</th>
                                </tr>
                                </thead>
                                <tbody id="tbody">

                                </tbody>

                                <tfoot>
                                <tr >
                                    <td colspan="12" align="center">
                                        <ul class="pagination" id="byPage">

                                        </ul>
                                    </td>
                                </tr>
                                </tfoot>

                            </table>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

         <!-- 增加模态框（Modal） -->
         <form id="saveForm">
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabel">
                                新增就业人员信息
                            </h4>
                        </div>
                        <div class="modal-body">

<!--                            姓名班级-->
                            <div class="form-group">
                                <label for="cid2" style="float:left;">班级：</label><select onchange="clazzChange()" name="cid" id="cid2" class="form-control" style="width: 200px;float: left"> </select>
                                <label for="sid5" style="float:left;"> &nbsp;&nbsp;学号：</label><select name="sid" id="sid5" class="form-control" style="width: 200px;float: left" onchange="clazzChange()"> </select>
<!--                                <input name="sid" id="sid2" type="hidden" class="form-control myModal-input" style="float:left;">-->
                            </div>
                            <br><br><br>
<!--                            薪资及工作地方-->
                            <div class="form-group">
                                <label for="salary">工资：</label><input name="salary" id="salary" class="form-control myModal-input">
                                <label for="loc">工作城市：</label><input name="loc" id="loc" class="form-control myModal-input">
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" onclick="save()">确定新增 </button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>
            </form>

         <!-- 修改模态框-->
         <form id="deleteoneForm">
    <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="updateFormModal">
                        修改 <a id="aupdate"></a>&nbsp;同学就业信息
                    </h4>
                </div>
                <div class="modal-body">

                    <input type="hidden" name="jid" id="jid2">
                    <!--                            薪资及工作地方-->
                    <div class="form-group">
                        <label for="salary">工资：</label><input name="salary" id="salary2" class="form-control myModal-input">
                        <label for="loc">工作城市：</label><input name="loc" id="loc2" class="form-control myModal-input">
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="clossbut">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="update()">完成修改 </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</form>

        <!-- 删除一个模态框（Modal） -->
        <div class="modal fade" id="deleteoneModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel3">
                            删除本条就业信息
                        </h4>
                    </div>
                    <input type="hidden" id="jid" name="jid">
                    <div class="modal-footer">
                        <button type="button" style = "float:left" class="btn btn-default" data-dismiss="modal" id="deleonejob">取消
                        </button>
                        <button type="button" class="btn btn-primary" onclick="deleonejob()">
                            确定删除
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
        <!-- 删除多个模态框（Modal） -->
        <div class="modal fade" id="deletemanyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel4">
                            删除多条就业信息
                        </h4>
                    </div>
                    <input type="hidden" id="jid4">
                    <div class="modal-footer">
                        <button type="button" style = "float:left" class="btn btn-default" data-dismiss="modal" id="deletemanyjob">取消
                        </button>
                        <button type="button" class="btn btn-primary" onclick="deletemanyjob()">
                            确定删除
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>


</body>
</html>

        </div>
    </div>
</div>
<script th:src="@{../jquery/jquery-2.1.1.min.js}"></script>
<script th:src="@{|/jquery/jquery.md5.js|}"></script>
<script th:src="@{../bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{../script/docs.min.js}"></script>
<script th:src="@{../layer/layer.js}"></script>
<script type="text/javascript">

    $(function () {
        $(".list-group-item").click(function(){
            if ( $(this).find("ul") ) {
                $(this).toggleClass("tree-closed");
                if ( $(this).hasClass("tree-closed") ) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
        showList(1);
    });

    $("#btnSearch").click(function () {
        showList(1);
    });

    //跳转到图示界面
    function selecttu() {
        window.location.href="/permission/salplatu";
    };

    //删除一个（弹框）
    function deleteone(jid) {
        $("#deleteoneModal").modal("show")
        $("#jid").val(jid)
    };
    //删除一个（删除）
    function deleonejob(){
        var jid = $("#jid").val();
        url="/permission/deleteoneDo"
        $.get(url,"jid="+jid,function (data){
            if(data.result){
                $("#deleonejob").click()
                showList(1);
            }
        })
    }

    //删除多个（弹框）
    function deletemany() {
        var jid = $("#delForm").serialize();
        $("#deletemanyModal").modal("show")
        $("#jid4").val(jid)
    };
    //删除多条（删除）
    function deletemanyjob(){
        var jid = $("#jid4").val();
        url="/permission/deletemanyDo"
        $.get(url,jid,function (data){
            if(data.result){
                $("#deletemanyjob").click()
                showList(1);
            }
        })
    }

    //新增（模态页面展示）
    function edit() {
        //学号回填
        sidDo(-1);
        //班级回填
        url1 = "/clazz/clazzbiyeDo";
        $.get(url1,"",function (data){
            if(data.result){
                var htmldata1 = "";
                htmldata1 = htmldata1 + "<option name='cid'value='-1'>蜗牛校区</option>";
                $.each(data.clazzList,function(index,clazz){
                    htmldata1 = htmldata1 + "<option name='cid' value="+clazz.cid+" >"+clazz.cname+"</option>";
                })
                $("#cid2").html(htmldata1);
            }
        })
    };
    //学号回填
    function sidDo(cid){
        url="/student/sidDo"
        $.get(url,"cid="+cid,function (data){
            if(data.result){
                var htmldata2 = "";
                $.each(data.studentList,function(index,student){
                    htmldata2 = htmldata2 + "<option name='sid' value="+student.sid+" >wnxy"+student.sid+"</option>";
                })
                $("#sid5").html(htmldata2);
            }
        })
    }
    function clazzChange(){
        var cid = $("#cid2").val();
        sidDo(cid)
    }
    //新增（数据库）
    function save(){
        url = "/permission/biyesaveDo";
        var sid5 = $("#sid5").val();
        if(sid5 == null || sid5 == "" ){
            layer.msg("学号不能为空", {time: 1000, icon: 4, shift: 6}, function () {
            });
            return
        }
        var sid3 = sid5.replace("wnxy","");

        var salary = $("#salary").val();
        if(salary == null || salary == ""){
            layer.msg("工资信息不能为空", {time: 1000, icon: 4, shift: 6}, function () {
            });
            return
        }
        if(salary*1 < 0){
            layer.msg("工资信息不能为负数", {time: 1000, icon: 4, shift: 6}, function () {
            });
            return
        }
        var reg = /^[1-9]\d*$/;
        if(!reg.test(salary)){
            layer.msg("工资只能以非零开头的数字", {time: 1000, icon: 4, shift: 6}, function () {
            });
            return
        }
        var loc = $("#loc").val();
        if(loc == null || loc == ""){
            layer.msg("工做地区不能为空", {time: 1000, icon: 4, shift: 6}, function () {
            });
            return
        }
        var parm = $("#saveForm").serialize();
        $.get(url,parm,function (data){
            if(data.result){
                //模态框数据清除
                $("#saveForm")[0].reset();
                //模态框隐藏(点击其他区域)
                $("#saveForm").modal("hide");
                layer.msg("增加成功", {time: 1000, icon: 6, shift: 6}, function () {
                    showList(1);
                });
            }else if(data.result == "已录入") {
                layer.msg("信息已录入", {time: 1000, icon: 4, shift: 6}, function () {
                });
            }else {
                layer.msg("班级这个同学不存在", {time: 1000, icon: 4, shift: 6}, function () {
                });
            }
        })
    };

    //模态框修改(展示)
    function updateone(jid){
        $("#updateModal").modal("show")
        url="/permission/updateshowDo"
        $.get(url,"jid="+jid,function (data){
            if(data.result){
                $("#aupdate").text(data.job.student.stname);
                $("#salary2").val(data.job.salary);
                $("#loc2").val(data.job.loc);
                $("#jid2").val(data.job.jid);
            }
        })
    }

    //完成修改
    function update() {
        var salary = $("#salary2").val();
        if(salary == null || salary == ""){
            layer.msg("工资不能为空", {time: 1000, icon: 4, shift: 6}, function () {
            });
            return
        }
       var reg = /^[1-9]\d*$/;
        if(!reg.test(salary)){
            layer.msg("工资只能以非零开头的数字", {time: 1000, icon: 4, shift: 6}, function () {
            });
            return
        }
        var loc = $("#loc2").val();
        if(loc == null || loc == ""){
            layer.msg("工作区域不能为空", {time: 1000, icon: 4, shift: 6}, function () {
            });
            return
        }

        url="/permission/updateDo"
        var jid = $("#deleteoneForm").serialize();
        $.get(url,jid,function (data){
            if(data.result){
                layer.msg("修改成功", {time: 3000, icon: 6, shift: 6}, function () {
                });
                //一定先要再次展示
                showList(1);
                $("#clossbut").click();
                //模态框数据清除
                // $("#updateForm")[0].reset();
                //模态框隐藏(点击其他区域)
                // $("#updateForm").modal("hide");
            }
        })
    };

    $(function () {
        url1 = "/clazz/clazzbiyeDo";
        $.get(url1,"",function (data){
            if(data.result){
                var htmldata1 = "";
                htmldata1 = htmldata1 + "<option name='cid' value='' >蜗牛校区</option>";
                $.each(data.clazzList,function(index,clazz){
                    htmldata1 = htmldata1 + "<option name='cid' value="+clazz.cid+" >"+clazz.cname+"</option>";
                })
                $("#option").html(htmldata1);
            }
        })
    });

    function showList(currentPage){
        var sid = $("#sid").val();
        var sid2 = sid.replace("wnxy","");
            $.ajax({
                url:"/permission/listDo",
                type:"get",

                data:{"currentPage":currentPage,"stname":$("#stname").val(),"cid":$("#option").val(),"sid":sid2},
                success:function (data) {
                    if (data.result){
                        var str="";
                        $.each(data.jobList, function (index, job) {
                            str += "<tr style='text-align: center'><td><input type='checkbox' name='jid' class='jid' value='"+job.jid+"'></td>";
                            str += "<td>" + job.student.stname + "</td>";
                            str += "<td>" + job.salary + "</td>";
                            str += "<td>" + job.loc + "</td>";
                            str += "<td>";
                            str += '<button type="button" class="btn btn-danger btn-xs" onclick="deleteone (' + job.jid + ')"><i class=" glyphicon "></i>删除</button>';
                            // str += '<button type="button" class="btn btn-success btn-xs" onclick="deleteone (' + job.jid + ')"><i class=" glyphicon glyphicon-check"></i>删除</button>';
                            str += '<button type="button" style="margin-left: 5px" class="btn btn-success btn-xs" onclick="updateone (' + job.jid + ')"><i class=" glyphicon glyphicon-check"></i>修改</button>';
                            str += "</td>";
                            str += "</tr>";
                        });

                        $("#tbody").html(str);

                        var pageStr = "";
                        pageStr += '<li class="' + (data.pageBean.currentPage == 1 ? 'disabled' : '') + '"><a href="#" onclick="showList(' + (data.pageBean.currentPage - 1) + ')">上一页</a></li>';
                        for (var i = 1; i <= data.pageBean.countPage; i++) {
                            pageStr += '<li class="' + (data.pageBean.currentPage == i ? 'active' : '') + '"><a href="#" onclick="showList(' + i + ')">' + i + '<span class="sr-only">(current)</span></a></li>';
                        }
                        pageStr += '<li class="' + (data.pageBean.currentPage == data.pageBean.countPage ? 'disabled' : '') + '"><a href="#" onclick="showList(' + (data.pageBean.currentPage == data.pageBean.countPage ? (data.pageBean.currentPage):(data.pageBean.currentPage + 1)) + ')">下一页</a></li>';
                        $("#byPage").html(pageStr);
                    }else{
                        layer.msg("无人员", {time: 1000, icon: 4, shift: 6}, function () {
                        });
                    }
                }
            });
    }
</script>
</body>
</html>
